<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap Admin</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <% include ../includePage/refResource.html %>

        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<!--[if lt IE 7 ]>
<body class="ie ie6"> <![endif]-->
<!--[if IE 7 ]>
<body class="ie ie7 "> <![endif]-->
<!--[if IE 8 ]>
<body class="ie ie8 "> <![endif]-->
<!--[if IE 9 ]>
<body class="ie ie9 "> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->

<body class="">
    <!--<![endif]-->

    <% include ../includePage/header.html %>

        <% include ../includePage/navigation.html %>

            <div class="content">

                <div class="articleContent">
                    <h2 class="box"><a href="/article/articleManager/">add Article</a></li></a></h2>

                    <div class="row-fluid">
                        <% for (var i=0;i<articleItem.length; i++) { var article=articleItem[i]; %>
                            <% if(i%3==0){%>
                    </div>
                    <%}%>
                        <% if(i%3==0){%>
                            <div class="row-fluid">
                                <%}%>
                                    <div class="span4">
                                        <a title="基于 Sass 和 Compass 构建的CSS按钮（button）样式库" href="/p/buttons/"
                                            target="_blank">
                                            <img class="marketing-img lazy" src="<%= article.logoSrc %>" width="300"
                                                height="150" data-src="assets/img/buttons.png"></a>
                                        <h2>
                                            <%= article.articleType %>
                                        </h2>
                                        <p>
                                            <%- article.describe%>
                                                <a class="btn" href="/article/articleManager/<%- article._id%>">Edit</a>
                                        </p>
                                    </div>
                                    <%} %>
                            </div>
                </div>
            </div>

            <script src="/js/lib/bootstrap/bootstrap.js"></script>
            <script type="text/javascript" src="/js/lib//bootstrap-paginator.min.js"></script>
            <script type="text/javascript">
                $(function () {
                    //获得浏览器参数
                    $.extend({
                        getUrlVars: function () {
                            var vars = [], hash;
                            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                            for (var i = 0; i < hashes.length; i++) {
                                hash = hashes[i].split('=');
                                vars.push(hash[0]);
                                vars[hash[0]] = hash[1];
                            }
                            return vars;
                        },
                        getUrlVar: function (name) {
                            return $.getUrlVars()[name];
                        }
                    });

                    //封装浏览器参数
                    var composeUrlParams = function () {
                        var param = '';
                        $.each($.getUrlVars(), function (i, item) {
                            if (item != 'p') {
                                var val = $.getUrlVar(item);
                                if (val) param += "&" + item + "=" + val;
                            }
                        });
                        return param;
                    }


                    //分页功能
                    var options = {
                        currentPage: 2,
                        totalPages: 5,
                        numberOfPages: 5
                    }
                    //分页功能
                    var page = $('#page1');
                    var options = {
                        currentPage: page.attr('pageNum'),
                        totalPages: page.attr('pageCount'),
                        numberOfPages: page.attr('numberOfPages'),
                        pageUrl: function (type, page, current) {
                            return "/article/listContext?" + composeUrlParams() + "&p=" + page;
                        }
                    }
                    $('#page1').bootstrapPaginator(options);
                });
            </script>

</body>

</html>